PwywWithPersonalizedProfile
Figma designs: View design
Example of a pwywWithPersonalizedProfile step
"personalizedProfile": {
"goalTitleColor": "#07CB99",
"currentTitleColor": "#E14A4E",
"goalTitle": "Your Goal",
"currentTitle": "Now",
"backgroundColor": "#FFF",
"backgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_arrows.svg",
"imageLogic": [
{
"condition": "user.getOnboardingAnswerValue('gender') == 'male'",
"currentImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_male_sad_profile.png",
"goalImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_male_happy_profile_opt.webp"
},
{
"condition": "true",
"currentImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_female_sad_profile.png",
"goalImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_female_happy_profile_opt.webp"
}
],
"sections": [
{
"title": "Energy level:",
"configs": [
{
"condition": "user.getOnboardingAnswerValue('tired') == 28",
"text": "Low",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#F23160",
"goalText": "High",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 1
},
{
"condition": "true",
"text": "Medium",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#FF8900",
"goalText": "High",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 2
}
]
},
{
"title": "Well-being level:",
"configs": [
{
"condition": "(user.getOnboardingAnswerValue('tired') + user.getOnboardingAnswerValue('worried') + user.getOnboardingAnswerValue('in_harmony') + user.getOnboardingAnswerValue('overwhelmed_tasks')) < 60",
"text": "Suboptimal",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#FF8900",
"goalText": "Excellent",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 2
},
{
"condition": "true",
"text": "Week",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#F23160",
"goalText": "Strong",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 1
}
]
},
{
"title": "Self-esteem level:",
"configs": [
{
"condition": "user.getOnboardingAnswerValue('accept_compliments') == 10",
"text": "Weak",
"inactiveColor": "#ECEAFF",
"activeColor": "#F23160",
"goalText": "Strong",
"goalActiveColor": "#07CB99",
"bar": {
"circleBackgroundColor": "white",
"circleBorderColor": "rgba(0, 0, 0, 0.15)",
"activeWidth": 55,
"goalActiveWidth": 85
}
},
{
"condition": "true",
"text": "Medium",
"inactiveColor": "#ECEAFF",
"activeColor": "#FF8900",
"goalText": "Strong",
"goalActiveColor": "#07CB99",
"bar": {
"circleBackgroundColor": "white",
"circleBorderColor": "rgba(0, 0, 0, 0.15)",
"activeWidth": 35,
"goalActiveWidth": 85
}
}
]
}
],
"profile": {
"title": "Your personalized plan is ready!",
"textColor": "#14191D",
"sections": [
{
"title": "Main difficulty:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_brain_blue.svg",
"iconBackgroundColor": "#FFF",
"textLogic": [
{
"condition": "user.getOnboardingAnswerValue('fear_failing') > 3",
"text": "Perfectionist"
},
{
"condition": "user.getOnboardingAnswerValue('express_emotions') > 3",
"text": "Suppression"
},
{
"condition": "user.getOnboardingAnswerValue('overwhelmed_tasks') > 10",
"text": "Overwhelm"
},
{
"condition": "user.getOnboardingAnswerValue('make_decision') > 3",
"text": "Indecision"
},
{
"condition": "true",
"text": "Imbalance"
}
]
},
{
"title": "Goal:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_goal_blue.svg",
"iconBackgroundColor": "#FFF",
"textLogic": [
{
"condition": "true",
"text": "State of calm"
}
]
}
]
}
}
Example of an onboarding that use a pwywWithPersonalizedProfile
{
"id": "fabulous_liven_inspired",
"appId": "co.thefabulous.app",
"language": "en",
"seo": {
"title": "Fabulous",
"favicon": "https://www.thefabulous.co/images/favicon.png",
"description": "Track Your Way to Better Mental Health with A Top-Ranked App. Say Goodbye to uncertainty with Fabulous, Kickstart your day with a productive and healthy routine."
},
"logoWithProgressBar": {
"type": "gradient",
"logoImage": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
"logoWidth": "122px",
"logoWidthMobile": "122px",
"logoHeight": "26px",
"logoHeightMobile": "26px",
"progressBarBackground": "#FFF",
"progressBarColor": "#BBB4FF"
},
"steps": [
{
"type": "goalChoiceWithMessageBox",
"stepId": "gender",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"title": "Create Your Personalized Journey to a Better Life",
"subtitle": "Build Healthy Habits and Routines Tailored to You",
"textColor": "#14191D",
"subtitleColor": "#14191D",
"choiceBackgroundColor": "white",
"choiceTextColor": "white",
"choiceTextBackgroundColor": "#6455FE",
"choiceTextSelectedBackgroundColor": "#3425B8",
"choiceTextHoverBackgroundColor": "#796CFF",
"ctaText": "Continue",
"ctaTextColor": "white",
"ctaBackgroundColor": "#3425B8",
"choices": [
{
"name": "Male",
"value": "male",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_male_opt.webp"
},
{
"name": "Female",
"value": "female",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_female_opt.webp"
}
],
"messageBox": {
"text": "By clicking 'Male' or 'Female' you agree with the <a href='https://www.thefabulous.co/terms.html'>Terms of Use</a> and <a href='https://www.thefabulous.co/terms.html#privacy'>Service Privacy Policy</a>, Subscription Policy and Cookie Policy.",
"textColor": "#14191D",
"linkColor": "#6455FE",
"backgroundColor": "#FFFFFF"
}
},
{
"type": "goalChoice",
"title": "What is your age?",
"subtitle": "We only use your age to personalize your plan",
"subtitleTextColor": "#7A90A3",
"stepId": "your_age",
"key": "your_age",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"choices": [
{
"name": "Under 20s",
"value": "under_20s",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "20s",
"value": "20s",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "30s",
"value": "30s",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "40s",
"value": "40s",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "50+",
"value": "50+",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
}
]
},
{
"type": "interstitial",
"stepId": "50m_people",
"hideProgressBar": true,
"config": {
"id": "50m_people",
"showTextDelay": 100,
"showButtonsDelay": 300,
"should_animate_text": true,
"image": "https://c.thefab.co/web-onboarding/fabulous/img_inter_social_proof_opt.webp",
"cta": "Continue",
"color_cta": "#ffffff",
"color_cta_button": "#3425B8",
"hide_close_icon": true,
"mode": "BOLD",
"color_background": "#ECEAFF",
"autoNext": false,
"textColor": "#ffffff",
"innerBackgroundColor": "#F6F5FF",
"imageAltText": "Over 50,000,000 people have chosen our apps",
"imageFit": "contain",
"color_background_mobile": "#F6F5FF"
}
},
{
"type": "questionScale",
"stepId": "express_emotions",
"title": "Do you agree with the following statement: It's difficult to express emotions",
"backgroundColor": "#ECEAFF",
"scaleBarColor": "#E3E0FF",
"barIconBackgroundColor": "#FFF",
"selectedBarIconBackgroundColor": "#FFF",
"selectedBarIconBorderColor": "#6455FE",
"textColor": "#14191D",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"ctaHoverBackgroundColor": "#3425B8",
"mode": "phone",
"innerBackgroundColor": "#F6F5FF",
"choiceTextColor": "#7A90A3",
"choices": [
{
"name": "Strongly disagree",
"value": 1,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_disagree.svg"
},
{
"name": "Negative",
"value": 2,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_disagree.svg"
},
{
"name": "Neutral",
"value": 3,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_neutral.svg"
},
{
"name": "Positive",
"value": 4,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_agree.svg"
},
{
"name": "Strongly agree",
"value": 5,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_agree.svg"
}
]
},
{
"type": "goalChoice",
"title": "How often do you feel tired or lack energy, even after rest?",
"stepId": "tired",
"key": "tired",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"choices": [
{
"name": "Often",
"value": 28,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Sometimes",
"value": 21,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Rarely",
"value": 15,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
}
]
},
{
"type": "goalChoice",
"title": "Have you ever struggled with accepting compliments because you didn't believe they are true?",
"stepId": "accept_compliments",
"key": "accept_compliments",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"choices": [
{
"name": "Almost always",
"value": 10,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Depends",
"value": 20,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Not at all",
"value": 60,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "I'm not sure",
"value": 40,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
}
]
},
{
"type": "questionScale",
"stepId": "make_decision",
"title": "I often find it challenging to make a decision",
"backgroundColor": "#ECEAFF",
"scaleBarColor": "#E3E0FF",
"barIconBackgroundColor": "#FFF",
"selectedBarIconBackgroundColor": "#FFF",
"selectedBarIconBorderColor": "#6455FE",
"textColor": "#14191D",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"ctaHoverBackgroundColor": "#3425B8",
"mode": "phone",
"innerBackgroundColor": "#F6F5FF",
"choiceTextColor": "#7A90A3",
"choices": [
{
"name": "Strongly disagree",
"value": 1,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_disagree.svg"
},
{
"name": "Negative",
"value": 2,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_disagree.svg"
},
{
"name": "Neutral",
"value": 3,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_neutral.svg"
},
{
"name": "Positive",
"value": 4,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_agree.svg"
},
{
"name": "Strongly agree",
"value": 5,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_agree.svg"
}
]
},
{
"type": "questionScale",
"stepId": "fear_failing",
"title": "I often struggle to pursue my ambitions due to fear of messing up and failing",
"backgroundColor": "#ECEAFF",
"scaleBarColor": "#E3E0FF",
"barIconBackgroundColor": "#FFF",
"selectedBarIconBackgroundColor": "#FFF",
"selectedBarIconBorderColor": "#6455FE",
"textColor": "#14191D",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"ctaHoverBackgroundColor": "#3425B8",
"mode": "phone",
"innerBackgroundColor": "#F6F5FF",
"choiceTextColor": "#7A90A3",
"choices": [
{
"name": "Strongly disagree",
"value": 1,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_disagree.svg"
},
{
"name": "Negative",
"value": 2,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_disagree.svg"
},
{
"name": "Neutral",
"value": 3,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_neutral.svg"
},
{
"name": "Positive",
"value": 4,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_agree.svg"
},
{
"name": "Strongly agree",
"value": 5,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_agree.svg"
}
]
},
{
"type": "goalChoice",
"title": "How often do you feel worried or overwhelmed?",
"stepId": "worried",
"key": "worried",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"choices": [
{
"name": "Often",
"value": 30,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Sometimes",
"value": 20,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Rarely",
"value": 15,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
}
]
},
{
"stepId": "first_thing_in_morning",
"key": "first_thing_in_morning",
"type": "goalMultiChoice",
"title": "What do you usually do first thing in the morning?",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"ctaBackgroundColor": "#3425B8",
"ctaColor": "#fff",
"textColor": "#14191D",
"ctaText": "Continue",
"hideProgressBar": true,
"choiceBackgroundColor": "#FFFFFF",
"choiceTextColor": "#14191D",
"hoverBackgroundColor": "#E3E0FF",
"hoverTextColor": "#14191D",
"selectedChoiceBackgroundColor": "#E3E0FF",
"selectedChoiceTextColor": "#14191D",
"checkboxBackgroundColor": "#ECEAFF",
"selectedCheckboxBackgroundColor": "#6455FE",
"bottomViewColor": "transparent",
"bottomButtonTextColor": "white",
"bottomButtonColor": "#3425B8",
"selectMode": "single",
"choices": [
{
"name": "Picking up my phone",
"value": "Picking up my phone",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_phone.svg"
},
{
"name": "Making coffee",
"value": "Making coffee",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_coffee.svg"
},
{
"name": "Brushing teeth & Taking Shower",
"value": "Brushing teeth & Taking Shower",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_shower.svg"
},
{
"name": "Other",
"value": "Other",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_other.svg"
}
]
},
{
"type": "questionScale",
"stepId": "overwhelmed_tasks",
"title": "I often feel overwhelmed by the amount of tasks I have to do",
"backgroundColor": "#ECEAFF",
"scaleBarColor": "#E3E0FF",
"barIconBackgroundColor": "#FFF",
"selectedBarIconBackgroundColor": "#FFF",
"selectedBarIconBorderColor": "#6455FE",
"textColor": "#14191D",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"ctaHoverBackgroundColor": "#3425B8",
"mode": "phone",
"innerBackgroundColor": "#F6F5FF",
"choiceTextColor": "#7A90A3",
"choices": [
{
"name": "Strongly disagree",
"value": 10,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_disagree.svg"
},
{
"name": "Negative",
"value": 11,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_disagree.svg"
},
{
"name": "Neutral",
"value": 10,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_neutral.svg"
},
{
"name": "Positive",
"value": 11,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_agree.svg"
},
{
"name": "Strongly agree",
"value": 10,
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_strongly_agree.svg"
}
]
},
{
"type": "goalChoice",
"title": "When was the last time you felt driven and motivated?",
"stepId": "motivated",
"key": "motivated",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"choices": [
{
"name": "A few weeks ago",
"value": "A few weeks ago",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "less than a year ago",
"value": "Less than a year ago",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "More than a year ago",
"value": "More than a year ago",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Never in my life",
"value": "Never in my life",
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
}
]
},
{
"stepId": "physical_activity",
"key": "physical_activity",
"type": "goalMultiChoice",
"title": "How much time do you dedicate to physical activity each week?",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"ctaBackgroundColor": "#3425B8",
"ctaColor": "#fff",
"textColor": "#14191D",
"ctaText": "Continue",
"hideProgressBar": true,
"choiceBackgroundColor": "#FFFFFF",
"choiceTextColor": "#14191D",
"hoverBackgroundColor": "#E3E0FF",
"hoverTextColor": "#14191D",
"selectedChoiceBackgroundColor": "#E3E0FF",
"selectedChoiceTextColor": "#14191D",
"checkboxBackgroundColor": "#ECEAFF",
"selectedCheckboxBackgroundColor": "#6455FE",
"bottomViewColor": "transparent",
"bottomButtonTextColor": "white",
"bottomButtonColor": "#3425B8",
"selectMode": "single",
"choices": [
{
"name": "0–2 hours",
"value": "0–2 hours",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_hours_0_2.svg"
},
{
"name": "3–5 hours",
"value": "3–5 hours",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_hours_3_5.svg"
},
{
"name": "6–8 hours",
"value": "6–8 hours",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_hours_6_8.svg"
},
{
"name": "More than 8 hours",
"value": "More than 8 hours",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_hours_8.svg"
}
]
},
{
"stepId": "habits_to_quit",
"key": "habits_to_quit",
"type": "goalMultiChoice",
"title": "Do you have any habits that you’d like to quit?",
"subtitle": "Choose all that apply",
"subtitleColor": "#7A90A3",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"ctaBackgroundColor": "#3425B8",
"ctaColor": "#fff",
"textColor": "#14191D",
"ctaText": "Continue",
"hideProgressBar": true,
"choiceBackgroundColor": "#FFFFFF",
"choiceTextColor": "#14191D",
"hoverBackgroundColor": "#E3E0FF",
"hoverTextColor": "#14191D",
"selectedChoiceBackgroundColor": "#E3E0FF",
"selectedChoiceTextColor": "#14191D",
"checkboxBackgroundColor": "#ECEAFF",
"selectedCheckboxBackgroundColor": "#6455FE",
"bottomViewColor": "transparent",
"bottomButtonTextColor": "white",
"bottomButtonColor": "#3425B8",
"selectMode": "multiple",
"choices": [
{
"name": "Being late/running out of time",
"value": "late",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_late.svg"
},
{
"name": "Self-doubt",
"value": "Self-doubt",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_doubt.svg"
},
{
"name": "Social media",
"value": "social-media",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_phone.svg"
},
{
"name": "Sugar cravings or junk food",
"value": "junk-food",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_snack.svg"
},
{
"name": "Losing sleep",
"value": "losing-sleep",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_sleep.svg"
},
{
"name": "Nail-biting",
"value": "nail-biting",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_nail.svg"
},
{
"name": "Binge-watching",
"value": "binge-watching",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_binge.svg"
}
]
},
{
"type": "goalChoice",
"title": "Have you felt in harmony with yourself and your circle in recent months?",
"stepId": "in_harmony",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"choices": [
{
"name": "Yes",
"value": 20,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "Moderately",
"value": 25,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
},
{
"name": "No",
"value": 30,
"nameColor": "#14191D",
"backgroundColor": "#FFF",
"hoverBackgroundColor": "#E5E2FF"
}
]
},
{
"stepId": "struggle_more",
"key": "struggle_more",
"type": "goalMultiChoice",
"title": "Have any of the following caused you to struggle more than before?",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"ctaBackgroundColor": "#3425B8",
"ctaColor": "#fff",
"textColor": "#14191D",
"ctaText": "Continue",
"hideProgressBar": true,
"choiceBackgroundColor": "#FFFFFF",
"choiceTextColor": "#14191D",
"hoverBackgroundColor": "#E3E0FF",
"hoverTextColor": "#14191D",
"selectedChoiceBackgroundColor": "#E3E0FF",
"selectedChoiceTextColor": "#14191D",
"checkboxBackgroundColor": "#ECEAFF",
"selectedCheckboxBackgroundColor": "#6455FE",
"bottomViewColor": "transparent",
"bottomButtonTextColor": "white",
"bottomButtonColor": "#3425B8",
"selectMode": "single",
"choices": [
{
"name": "Family or relationship",
"value": "family",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_family.svg"
},
{
"name": "External circumstances",
"value": "circumstances",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_external.svg"
},
{
"name": "My appearance",
"value": "appearance",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_appearance.svg"
},
{
"name": "Sleep issues",
"value": "sleep",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_sleep.svg"
},
{
"name": "Job-related stress",
"value": "stress",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_job.svg"
},
{
"name": "Other",
"value": "other",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_other.svg"
}
]
},
{
"type": "interstitial",
"stepId": "evidence_based",
"hideProgressBar": true,
"config": {
"id": "evidence_based",
"showTextDelay": 100,
"showButtonsDelay": 300,
"should_animate_text": true,
"image": "https://c.thefab.co/web-onboarding/fabulous/img_inter_research_fab.webp",
"cta": "Continue",
"color_cta": "#ffffff",
"color_cta_button": "#3425B8",
"hide_close_icon": true,
"mode": "BOLD",
"color_background": "#ECEAFF",
"autoNext": false,
"textColor": "#ffffff",
"innerBackgroundColor": "#F6F5FF",
"imageAltText": "Fabulous was developed using evidence-based psychological practices",
"imageFit": "contain",
"color_background_mobile": "#F6F5FF"
}
},
{
"type": "interstitial",
"stepId": "reviewed_by_expert",
"hideProgressBar": true,
"config": {
"id": "reviewed_by_expert",
"showTextDelay": 100,
"showButtonsDelay": 300,
"should_animate_text": true,
"image": "https://c.thefab.co/web-onboarding/fabulous/img_inter_expert_fab.webp",
"cta": "Continue",
"color_cta": "#ffffff",
"color_cta_button": "#3425B8",
"hide_close_icon": true,
"mode": "BOLD",
"color_background": "#ECEAFF",
"autoNext": false,
"textColor": "#ffffff",
"innerBackgroundColor": "#F6F5FF",
"imageAltText": "Your plan will be reviewed by an expert",
"imageFit": "contain",
"color_background_mobile": "#F6F5FF"
}
},
{
"type": "interstitial",
"stepId": "worldwide_community",
"hideProgressBar": true,
"config": {
"id": "worldwide_community",
"showTextDelay": 100,
"showButtonsDelay": 300,
"should_animate_text": true,
"image": "https://c.thefab.co/web-onboarding/fabulous/img_inter_social2_opt.webp",
"cta": "Continue",
"color_cta": "#ffffff",
"color_cta_button": "#3425B8",
"hide_close_icon": true,
"mode": "BOLD",
"color_background": "#ECEAFF",
"autoNext": false,
"textColor": "#ffffff",
"innerBackgroundColor": "#F6F5FF",
"imageAltText": "Join over 50,000,000 people. Become part of a growing worldwide community and achieve your goals with us!",
"imageFit": "contain",
"color_background_mobile": "#F6F5FF"
}
},
{
"type": "imageProfile",
"stepId": "image_profile",
"title": "Summary of your Well-being Profile",
"headerText": "Negative effects level",
"imageSectionBackgroundColor": "white",
"ctaText": "Continue",
"ctaTextColor": "#FFFFFF",
"ctaBackgroundColor": "#3425B8",
"backgroundColor": "#F6F5FF",
"textColor": "#14191D",
"barValue": "user.getOnboardingAnswerValue('tired') + user.getOnboardingAnswerValue('worried') + user.getOnboardingAnswerValue('in_harmony') + user.getOnboardingAnswerValue('overwhelmed_tasks')",
"bar": {
"backgroundColor": "linear-gradient(90deg, #78D3FB 0%, #9CF7A8 25.34%, #F2E87D 50%, #F1A368 75%, #F05E52 100%)",
"borderColor": "#F3F2EF",
"separatorColor": "#F3F2EF",
"circleBorderColor": "#D5D4D0",
"circleBackgroundColor": "white",
"circleBoxShadow": "0px 0.35px 1.95px 0px #00000026"
},
"barLevels": {
"low": {
"title": "LOW level",
"subtitle": "Low levels of negative effects mean lowered chance of procrastination, worry, reduced energy and well-being",
"textColor": "#14191D",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_warning_low.svg",
"backgroundColor": "#D4FBFF",
"label": {
"text": "Low",
"backgroundColor": "#D4FBFF",
"textColor": "#49B6D9",
"borderColor": "#8AD8F1"
}
},
"normal": {
"title": "NORMAL level",
"subtitle": "Even normal levels of negative effects may contribute to procrastination, worry, reduced energy and well-being",
"textColor": "#14191D",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_warning_normal.svg",
"backgroundColor": "#D9F9EC",
"label": {
"text": "Normal",
"backgroundColor": "#D9F9EC",
"textColor": "#1AC582",
"borderColor": "#9AEDCB"
}
},
"medium": {
"title": "MEDIUM level",
"subtitle": "Medium levels of negative effects may contribute to frequent procrastination, heightened worry, reduced energy and a noticeable decline in overall well-being",
"textColor": "#14191D",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_warning_medium.svg",
"backgroundColor": "#FFE7CC",
"label": {
"text": "Medium",
"backgroundColor": "#FFE7CC",
"textColor": "#FF8900",
"borderColor": "#FFCC91"
}
},
"high": {
"title": "HIGH level",
"subtitle": "High levels of negative effects can lead to constant procrastination, increased worrying, reduced energy and well-being",
"textColor": "#14191D",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_high-level.svg",
"backgroundColor": "#FDE0E7",
"label": {
"text": "High",
"backgroundColor": "#FFDEDE",
"textColor": "#E14A4E",
"borderColor": "#EFB7B7"
}
}
},
"sections": [
{
"title": "Main difficulty:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_dislike.svg",
"backgroundColor": "white",
"textLogic": [
{
"condition": "user.getOnboardingAnswerValue('tired') > (user.getOnboardingAnswerValue('worried') + 7)",
"text": "Low energy"
},
{
"condition": "true",
"text": "Worry"
}
]
},
{
"title": "Challenging period:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_calender.svg",
"backgroundColor": "white",
"textLogic": [
{
"condition": "user.getOnboardingAnswer('motivated') == 'Less than a year ago'",
"text": "Few months"
},
{
"condition": "user.getOnboardingAnswer('motivated') == 'More than a year ago'",
"text": "Few years"
},
{
"condition": "user.getOnboardingAnswer('motivated') == 'Never in my life'",
"text": "Whole life"
},
{
"condition": "true",
"text": "Few weeks"
}
]
},
{
"title": "Trigger:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_trigger.svg",
"backgroundColor": "white",
"textLogic": [
{
"condition": "user.getOnboardingAnswerValue('struggle_more') == 'family'",
"text": "Family or relationship"
},
{
"condition": "user.getOnboardingAnswerValue('struggle_more') == 'circumstances'",
"text": "External circumstances"
},
{
"condition": "user.getOnboardingAnswerValue('struggle_more') == 'appearance'",
"text": "My appearance"
},
{
"condition": "user.getOnboardingAnswerValue('struggle_more') == 'sleep'",
"text": "Sleep issues"
},
{
"condition": "user.getOnboardingAnswerValue('struggle_more') == 'stress'",
"text": "Job-related stress"
},
{
"condition": "true",
"text": "General triggers"
}
]
},
{
"title": "Energy level:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_low.svg",
"backgroundColor": "white",
"textLogic": [
{
"condition": "user.getOnboardingAnswer('tired') == 28",
"text": "Low"
},
{
"condition": "user.getOnboardingAnswer('tired') == 21",
"text": "Somewhat low"
},
{
"condition": "true",
"text": "Normal"
}
]
}
],
"imageLogic": [
{
"condition": "user.getOnboardingAnswerValue('gender') == 'male'",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_male_summary_sad.webp"
},
{
"condition": "true",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_female_summary_sad.webp"
}
]
},
{
"type": "planEvolution",
"stepId": "evolution_6_months",
"title": "A plan designed to support your wellbeing journey",
"paragraph": "<span style='color: #6455FE'>85%</span><span style='color:#7A90A3; font-weight:500'> by </span><span style='color: #6455FE'>{{TODAY|month|+6}}.</span>",
"subtitle": "Based on your answers, it forecasts that your well-being will improve to",
"subtitleColor": "#7A90A3",
"startValue": "34",
"goalValue": "85",
"unit": "%",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"bottomViewColor": "transparent",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"chart": {
"trendDirection": "down",
"dotBorderColor": "#FFF",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueLineColor": "#A298FF",
"monthsCount": 6,
"lineGradient": {
"from": "#6455FE",
"to": "#B99AFF"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 2,
"variation": 5,
"extremes": 5
}
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"The chart is a non-customized illustration and actual results may vary."
]
}
},
{
"stepId": "progress_bars",
"type": "multiProgress",
"title": "Creating your<br><span style='color: #6455FE'>personalized Well-being Management Plan</span>",
"titleColor": "#343134",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"subtitle": "Sit tight! We’re building your perfect plan, based on millions of data points from successful Fabulous users",
"subtitleColor": "#7A90A3",
"useHTML": true,
"hideOverlay": false,
"dotsColor": "#FFF",
"hideProgressBar": true,
"bars": [
{
"label": "Adapting growth areas",
"labelColor": "#FFA133",
"backgroundColorFilled": "#FFA133",
"borderColorEmpty": "#FFF",
"backgroundColorEmpty": "transparent",
"animation": [
{
"to": 49,
"duration": 3000,
"delay": 500,
"prompt": {
"image": "https://c.thefab.co/web-onboarding/mind/alive/ic_liven_style_finish_opt.png",
"title": "Do you want to learn how to build healthy habits?",
"titleColor": "#14191D",
"backgroundColor": "#FFF",
"imageWidth": "312px",
"choices": [
{
"text": "Yes",
"color": "white",
"hoverColor": "#FFF",
"backgroundColor": "#3425B8",
"hoverBackgroundColor": "#3425B8"
},
{
"text": "No",
"color": "#14191D",
"hoverColor": "#FFF",
"backgroundColor": "#ECEAFF",
"hoverBackgroundColor": "#3425B8"
}
]
}
},
{
"to": 95,
"duration": 1800,
"delay": 100
},
{
"to": 100,
"duration": 100,
"delay": 100
}
]
},
{
"label": "Users performance",
"labelColor": "#8B8BFF",
"backgroundColorFilled": "#8B8BFF",
"borderColorEmpty": "#FFF",
"backgroundColorEmpty": "transparent",
"animation": [
{
"to": 57,
"duration": 2200,
"delay": 300,
"prompt": {
"image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/mind/alive/ic_liven_style_journaling_opt.png",
"title": "Are you familiar with journaling for self-reflection?",
"titleColor": "#343134",
"backgroundColor": "#FFF",
"imageWidth": "312px",
"choices": [
{
"text": "Yes",
"color": "white",
"hoverColor": "#FFF",
"backgroundColor": "#3425B8",
"hoverBackgroundColor": "#3425B8"
},
{
"text": "No",
"color": "#14191D",
"hoverColor": "#FFF",
"backgroundColor": "#ECEAFF",
"hoverBackgroundColor": "#3425B8"
}
]
}
},
{
"to": 95,
"duration": 1200,
"delay": 120
},
{
"to": 100,
"duration": 300,
"delay": 0
}
]
},
{
"label": "Morning Routine Ideas",
"labelColor": "#4BD2B9",
"backgroundColorFilled": "#4BD2B9",
"borderColorEmpty": "#FFF",
"backgroundColorEmpty": "transparent",
"animation": [
{
"to": 38,
"duration": 2300,
"delay": 200,
"prompt": {
"image": "https://c.thefab.co/web-onboarding/mind/alive/ic_liven_style_build_opt.png",
"title": "Do you want to learn how to build healthy habits?",
"titleColor": "#343134",
"backgroundColor": "#FFF",
"imageWidth": "312px",
"choices": [
{
"text": "Yes",
"color": "white",
"hoverColor": "#FFF",
"backgroundColor": "#3425B8",
"hoverBackgroundColor": "#3425B8"
},
{
"text": "No",
"color": "#14191D",
"hoverColor": "#FFF",
"backgroundColor": "#ECEAFF",
"hoverBackgroundColor": "#3425B8"
}
]
}
},
{
"to": 100,
"duration": 1800,
"delay": 0
}
]
}
],
"footerBox": {
"title": "It has really changed my life",
"text": "I have been using this app for six months now. During this time, I have been able to get rid of the habit of putting everything off until the last minute. The app has helped me to organise my time better and start achieving my goals. It has really changed my life for the better.",
"smallText": "Brian Ross",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/review-srars.svg",
"backgroundColor": "white",
"primaryColor": "#14191D",
"secondaryColor": "#7A90A3"
}
},
{
"type": "questions",
"stepId": "questions_name",
"backgroundColor": "#ECEAFF",
"innerBackgroundColor": "#F6F5FF",
"questions": [
{
"type": "email",
"title": "Your email address?",
"ctaColor": "#3425B8",
"ctaTextColor": "#FFFFFF",
"textColor": "#14191D",
"ctaText": "Continue",
"placeholder": "example@email.com",
"placeholderColor": "#7A90A3",
"invalidEmailMessage": "* Please enter a valid email address",
"inputTextColor": "#7A90A3",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true
},
{
"type": "name",
"title": "One last thing, what do your friends call you?",
"subtitle": "We will use this for your personal plan.",
"ctaColor": "#3425B8",
"ctaTextColor": "#FFFFFF",
"textColor": "#14191D",
"ctaText": "Continue",
"placeholder": "My name is ...",
"placeholderColor": "#7A90A3",
"inputTextColor": "#7A90A3",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true
}
]
},
{
"type": "planEvolution",
"stepId": "evolution_4_months",
"title": "Your Productivity Level",
"startValue": "34",
"goalValue": "85",
"unit": "%",
"useHTML": true,
"ctaText": "Continue",
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"bottomViewColor": "transparent",
"backgroundColor": "#ECEAFF",
"textColor": "#14191D",
"innerBackgroundColor": "#F6F5FF",
"showInnerProgressBar": true,
"chart": {
"trendDirection": "down",
"dotBorderColor": "#FFF",
"dotColor": "#6455FE",
"gridColor": "#D8DCFF",
"goalValueLabelColor": "white",
"axisTextColor": "#A298FF",
"goalValueLineColor": "#A298FF",
"monthsCount": 4,
"lineGradient": {
"from": "#6455FE",
"to": "#B99AFF"
},
"options": {
"span": 0.5,
"band": 0.8,
"degree": 1,
"variation": 4,
"extremes": 6
}
},
"footerText": {
"textColor": "#7A90A3",
"paragraphs": [
"The chart is a non-customized illustration and actual results may vary.",
"<p style='color:#14191D; font-weight:bold; font-size:20px; line-height:24px; padding-top:16px;'>Your personal <span style='color:#6455FE;'>Habit <br/> Building Plan</span> is ready</p>"
]
}
},
{
"type": "pwywWithPersonalizedProfile",
"stepId": "pwyw_with_personalized_plan",
"backgroundColor": "#F1F3F5",
"footerImageUrl": "https://c.thefab.co/web-onboarding/fabulous/pay-safe.svg",
"timer": {
"type": "with-logo",
"textColor": "#14191D",
"backgroundColor": "white",
"buttonBackgroundColor": "#07CB99",
"buttonHoverBackgroundColor": "#23B892",
"buttonColor": "white",
"boxShadow": "0px 0px 22px 0px #E8EAED",
"logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg"
},
"terms": {
"type": "with-plan-details",
"linkColor": "#2C5FFF",
"backgroundColor": "white",
"textColor": "#4F6171"
},
"testimonials": {
"type": "default",
"title": "Members love our plans",
"subtitle": "Here's what people are saying about Fabulous",
"titleColor": "#14191D",
"subtitleColor": "#4F6171",
"footerTextColor": "#373FC3",
"reviews": [
{
"username": "Sabine Rush",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/quotes.svg",
"text": "Being diagnosed with ADHD as an adult has been a shock but a blessing. A blessing because now I can get control of my life. I’m 45 and I have felt out of control my entire life. I tried everything but now, thanks to a good doctor and program like this I’m getting my life in order and looking forward to living for real for the first time. Thank you Clarify ADHD!! YOU ROCK!",
"textColor": "#373FC3",
"usernameColor": "#000F96",
"backgroundColor": "#FFFFFF"
},
{
"username": "Chey Here",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/quotes.svg",
"text": "This app is absolutely life changing! I feel so grateful to have found it and I have no regrets in paying for it. It’s like having a life coach that is gentle and kind but incredibly wise. I’ve surrendered to this process and have started to change on the inside. I feel more peace, gratitude and hope for my future by learning how to break things down into smaller steps and celebrate each small progress. Thank you so much. Highly recommended.",
"textColor": "#373FC3",
"usernameColor": "#000F96",
"backgroundColor": "#FFFFFF"
}
]
},
"features": {
"type": "how-it-works",
"title": "What you will get with Fabulous",
"titleColor": "#14191D",
"backgroundColor": "white",
"items": [
{
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_healthy.svg",
"title": "Healthy habits & routines",
"subtitle": "The life you’ve always wanted, with the help of behavioral science.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_wellbeing.svg",
"title": "Improved well-being",
"subtitle": "Stepwise programs to enhance health, self-esteem, relationships & more.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_coaching.svg",
"title": "Coaching sessions",
"subtitle": "On-demand coaching audios & 1-on-1 personalized support (on upgrade).",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
},
{
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_tools.svg",
"title": "Tools that support your goals",
"subtitle": "Meditations, guided workouts, deep work rooms, bedtime stories & more.",
"textColor": "#14191D",
"subtitleColor": "#7A90A3"
}
],
"whyItWorks": {
"title": "Fabulous was developed using evidence-based psychological practices",
"subtitle": "Your plan is based on decades of research",
"titleColor": "#14191D",
"subtitleColor": "#4F6171",
"images": [
{
"url": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_stanford.svg",
"alt": "Stanford"
},
{
"url": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_duke.svg",
"alt": "Harvard"
},
{
"url": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_harward.svg",
"alt": "Duke"
}
]
}
},
"choices": [
{
"planCode": "fab-subs-monthly-normal-intro-9-thirtynine",
"discountOfferPlanCode": "fab-subs-monthly-discount-intro-7-thirtynine",
"backgroundColor": "#FFFFFF",
"textColor": "#14191D",
"initialPriceColor": "#4F6171",
"strikeThroughColor": "#FE00D2",
"borderColor": "#251C93",
"priceByColor": "#251C93",
"hrColor": "#E8EAED",
"priceLabelBackgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/price-tag-bg.svg"
},
{
"planCode": "fab-subs-monthly-normal-intro-19-thirtynine",
"discountOfferPlanCode": "fab-subs-monthly-discount-intro-14-thirtynine",
"backgroundColor": "#FFFFFF",
"textColor": "#14191D",
"initialPriceColor": "#4F6171",
"strikeThroughColor": "#FE00D2",
"borderColor": "#251C93",
"priceByColor": "#251C93",
"titleColor": "white",
"mostPopular": true,
"hrColor": "#E8EAED",
"priceLabelBackgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/price-tag-bg.svg"
},
{
"planCode": "fab-subs-quarterly-normal-intro-39-seventynine",
"discountOfferPlanCode": "fab-subs-quarterly-discount-intro-29-seventynine",
"backgroundColor": "#FFFFFF",
"textColor": "#14191D",
"initialPriceColor": "#4F6171",
"strikeThroughColor": "#FE00D2",
"borderColor": "#251C93",
"priceByColor": "#251C93",
"hrColor": "#E8EAED",
"priceLabelBackgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/price-tag-bg.svg"
}
],
"ctaTextColor": "#FFF",
"ctaBackgroundColor": "#3428C6",
"ctaHoverBackgroundColor": "#251C93",
"personalizedProfile": {
"goalTitleColor": "#07CB99",
"currentTitleColor": "#E14A4E",
"goalTitle": "Your Goal",
"currentTitle": "Now",
"backgroundColor": "#FFF",
"backgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_arrows.svg",
"imageLogic": [
{
"condition": "user.getOnboardingAnswerValue('gender') == 'male'",
"currentImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_male_sad_profile.png",
"goalImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_male_happy_profile_opt.webp"
},
{
"condition": "true",
"currentImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_female_sad_profile.png",
"goalImageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_female_happy_profile_opt.webp"
}
],
"sections": [
{
"title": "Energy level:",
"configs": [
{
"condition": "user.getOnboardingAnswerValue('tired') == 28",
"text": "Low",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#F23160",
"goalText": "High",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 1
},
{
"condition": "true",
"text": "Medium",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#FF8900",
"goalText": "High",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 2
}
]
},
{
"title": "Well-being level:",
"configs": [
{
"condition": "(user.getOnboardingAnswerValue('tired') + user.getOnboardingAnswerValue('worried') + user.getOnboardingAnswerValue('in_harmony') + user.getOnboardingAnswerValue('overwhelmed_tasks')) < 60",
"text": "Suboptimal",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#FF8900",
"goalText": "Excellent",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 2
},
{
"condition": "true",
"text": "Week",
"borderColor": "#E8EAED",
"inactiveColor": "#ECEAFF",
"activeColor": "#F23160",
"goalText": "Strong",
"goalActiveColor": "#07CB99",
"activeBarsNumber": 1
}
]
},
{
"title": "Self-esteem level:",
"configs": [
{
"condition": "user.getOnboardingAnswerValue('accept_compliments') == 10",
"text": "Weak",
"inactiveColor": "#ECEAFF",
"activeColor": "#F23160",
"goalText": "Strong",
"goalActiveColor": "#07CB99",
"bar": {
"circleBackgroundColor": "white",
"circleBorderColor": "rgba(0, 0, 0, 0.15)",
"activeWidth": 55,
"goalActiveWidth": 85
}
},
{
"condition": "true",
"text": "Medium",
"inactiveColor": "#ECEAFF",
"activeColor": "#FF8900",
"goalText": "Strong",
"goalActiveColor": "#07CB99",
"bar": {
"circleBackgroundColor": "white",
"circleBorderColor": "rgba(0, 0, 0, 0.15)",
"activeWidth": 35,
"goalActiveWidth": 85
}
}
]
}
],
"profile": {
"title": "Your personalized plan is ready!",
"textColor": "#14191D",
"sections": [
{
"title": "Main difficulty:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_brain_blue.svg",
"iconBackgroundColor": "#FFF",
"textLogic": [
{
"condition": "user.getOnboardingAnswerValue('fear_failing') > 3",
"text": "Perfectionist"
},
{
"condition": "user.getOnboardingAnswerValue('express_emotions') > 3",
"text": "Suppression"
},
{
"condition": "user.getOnboardingAnswerValue('overwhelmed_tasks') > 10",
"text": "Overwhelm"
},
{
"condition": "user.getOnboardingAnswerValue('make_decision') > 3",
"text": "Indecision"
},
{
"condition": "true",
"text": "Imbalance"
}
]
},
{
"title": "Goal:",
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_goal_blue.svg",
"iconBackgroundColor": "#FFF",
"textLogic": [
{
"condition": "true",
"text": "State of calm"
}
]
}
]
}
}
},
{
"type": "checkoutWithDiscountedIntro",
"stepId": "checkout_discount_intro",
"backgroundColor": "#F1F3F5",
"planCode": "fab-subs-monthly-normal-intro-19-thirtynine",
"discountOfferPlanCode": "fab-subs-monthly-discount-intro-14-thirtynine",
"textColor": "#14191D",
"secondaryColor": "#7A90A3",
"footerImageUrl": "https://c.thefab.co/web-onboarding/fabulous/pay-safe.svg",
"timer": {
"type": "with-logo",
"textColor": "#14191D",
"backgroundColor": "white",
"buttonBackgroundColor": "#07CB99",
"buttonColor": "white",
"boxShadow": "0px 0px 22px 0px #E8EAED",
"logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg",
"buttonHoverBackgroundColor": "#23B892"
},
"form": {
"placeholderColor": "#7A90A3",
"inputColor": "#14191d",
"inputBorderColor": "#FFFFFF",
"ctaBackgroundColor": "#07CB99",
"ctaTextColor": "white",
"noCommitmentsTextColor": "#4F6171",
"inputBackgroundColor": "white",
"ctaText": "Get my plan"
},
"planDetails": {
"title": "Join <span style='color:#07CB99;'>50,000,000</span> users to achieve your goals",
"textColor": "#14191D",
"subtitleColor": "#7A90A3",
"hrColor": "#C5CED6",
"discountColor": "#F23160",
"backgroundColor": "#FFFFFF",
"discountTimer": {
"iconUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_discount-timer.svg",
"textColor": "#B2002B",
"backgroundColor": "#FEE8EE"
},
"closeIconColor": "#C5CED6",
"useHTML": true
},
"tabs": {
"activeTextColor": "white",
"textColor": "#4F6171",
"activeBackgroundColor": "#130A7E",
"backgroundColor": "#FFFFFF"
},
"terms": {
"type": "with-plan-details",
"linkColor": "#2C5FFF",
"backgroundColor": "white",
"textColor": "#4F6171"
},
"discountModal": {
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/img_skip_diagram_min.webp",
"useHTML": true,
"styles": {
"backgroundColor": "white",
"textColor": "#4F6171",
"titleColor": "#14191D",
"ctaTextColor": "white",
"ctaBackgroundColor": "#3428C6",
"overlayColor": "rgba(21, 21, 39, 0.6)",
"ctaHoverBackgroundColor": "#251C93",
"discountColor": "#FF634E"
}
},
"postPurchaseParams": {
"upsellFlowId": "fabulous_upsell_bundle_5apps_49_skip_pdf_expert_pathahead2"
}
}
],
"logic": [
{
"stepId": "pwyw_with_personalized_plan",
"actions": [
{
"type": "progress",
"to": "pwyw_with_personalized_plan"
}
]
}
]
}
[!NOTE] A checkoutWithDiscountedIntro step should come after this template to show the details of the plan that the user selects on this template.
To use
checkoutWithDiscountedIntroembedded inPwywWithPersonalizedProfile, you’ll need to add the step config as acheckoutkey to that template:
| Key | Notes |
|---|---|
type | pwywWithPersonalizedProfile |
stepId | Unique step ID |
timer | { "type": "with-logo", "textColor": "#14191D", "backgroundColor": "white", "buttonBackgroundColor": "#07CB99", "buttonHoverBackgroundColor": "#23B892", "buttonColor": "white", "boxShadow": "0px 0px 22px 0px #E8EAED", "logoUrl": "https://c.thefab.co/web-onboarding/fabulous/fabulous-logo.svg" }  |
choices | An array of objects for each of the plans to use on PWYW page  Example"choices": [ { "planCode": "fab-subs-monthly-normal-intro-9-thirtynine", "discountOfferPlanCode": "fab-subs-monthly-discount-intro-7-thirtynine", "backgroundColor": "#FFFFFF", "textColor": "#14191D", "initialPriceColor": "#4F6171", "strikeThroughColor": "#FE00D2", "borderColor": "#251C93", "priceByColor": "#251C93", "hrColor": "#E8EAED", "priceLabelBackgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/price-tag-bg.svg" }, { "planCode": "fab-subs-monthly-normal-intro-19-thirtynine", "discountOfferPlanCode": "fab-subs-monthly-discount-intro-14-thirtynine", "backgroundColor": "#FFFFFF", "textColor": "#14191D", "initialPriceColor": "#4F6171", "strikeThroughColor": "#FE00D2", "borderColor": "#251C93", "priceByColor": "#251C93", "titleColor": "white", "mostPopular": true, "hrColor": "#E8EAED", "priceLabelBackgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/price-tag-bg.svg" }, { "planCode": "fab-subs-quarterly-normal-intro-39-seventynine", "discountOfferPlanCode": "fab-subs-quarterly-discount-intro-29-seventynine", "backgroundColor": "#FFFFFF", "textColor": "#14191D", "initialPriceColor": "#4F6171", "strikeThroughColor": "#FE00D2", "borderColor": "#251C93", "priceByColor": "#251C93", "hrColor": "#E8EAED", "priceLabelBackgroundImage": "https://c.thefab.co/web-onboarding/fabulous/icon/price-tag-bg.svg" } ] |
personalizedProfile | You can [Personalized Profile Section](Checkout/Personalized Profile Section) |
footerImageUrl | An image that can be added at the bottom of the page:  |
testimonials | Same [Checkout](Onboarding Templates/Checkout) |
terms | Same terms are used in [Checkout](Onboarding Templates/Checkout) |
features | More data below |
ctaTextColor | The cta text color |
ctaBackgroundColor | The cta background color |
ctaHoverBackgroundColor | The cta hover background color |
reminder | Can be used to show the user a checkbox to send a reminder email: "reminder": { "text": "Email me a reminder before my introductory period ends, so I can cancel if Fabulous isn't what I expected!", "backgroundColor": "white", "textColor": "#FFA133", "iconBackgroundColor": "#FFEFDC", "iconColor": "#FFA133", "daysBeforeTrialEnd": 14, "checkboxBackgroundColor": "#FFEFDC" }  |
checkout | Optional, and can be used to embed a checkoutWithDiscountedIntro step to that template. |
Plan Timeline
Can be used to show a timeline component to the step:
"planTimeline": {
"title": "How your plan works?",
"titleColor": "#14191D",
"textColor": "#4F6171",
"backgroundColor": "white",
"borderColor": "#6455FE",
"list": [
{
"title": "Today",
"text": "Your introductory plan begins today. Start a simple routine and feel a quick lift.",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/icon_trial_water.png"
},
{
"title": "Day 7",
"text": "Your introductory plan ends and you'll be charged. Starts feel easier, evenings calmer.",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/icon_trial_lock.png"
},
{
"title": "Beyond Day 7",
"text": "You'll be charged monthly. Keep stacking habits and focusing with less effort.",
"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/icon_trial_plant.png"
}
]
}
Features Section
Figma: <https://www.figma.com/design/Y4CtH21qRbwjTkYBTMGhuV/Web-Checkout-Pages?node-id=6091-426&m=dev>
| Key | Notes |
|---|---|
type | how-it-works |
title | The section’s title |
titleColor | The title color |
backgroundColor | The template background color |
items | An array of items to show: Example of items array"items": [ { "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_healthy.svg", "title": "Healthy habits & routines", "subtitle": "The life you’ve always wanted, with the help of behavioral science.", "textColor": "#14191D", "subtitleColor": "#7A90A3" }, { "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_wellbeing.svg", "title": "Improved well-being", "subtitle": "Stepwise programs to enhance health, self-esteem, relationships & more.", "textColor": "#14191D", "subtitleColor": "#7A90A3" }, { "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_coaching.svg", "title": "Coaching sessions", "subtitle": "On-demand coaching audios & 1-on-1 personalized support (on upgrade).", "textColor": "#14191D", "subtitleColor": "#7A90A3" }, { "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_tools.svg", "title": "Tools that support your goals", "subtitle": "Meditations, guided workouts, deep work rooms, bedtime stories & more.", "textColor": "#14191D", "subtitleColor": "#7A90A3" } ] |
whyItWorks | An object to represent the bottom section with the images: Example"whyItWorks": { "title": "Fabulous was developed using evidence-based psychological practices", "subtitle": "Your plan is based on decades of research", "titleColor": "#14191D", "subtitleColor": "#4F6171", "images": [ { "url": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_stanford.svg", "alt": "Stanford" }, { "url": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_duke.svg", "alt": "Harvard" }, { "url": "https://c.thefab.co/web-onboarding/fabulous/icon/ic_harward.svg", "alt": "Duke" } ] } |